<template>
  <view class="index-container">
    <!-- 顶部定位和搜索 -->
    <view class="header">
      <view class="header-top">
        <view class="location">
          <uni-icons type="location" size="16" color="#fff"></uni-icons>
          <text>杭州市梦想小镇</text>
        </view>
        <uni-icons type="notification" size="20" color="#fff"></uni-icons>
      </view>
      
      <!-- 修复后的搜索框 -->
      <view class="search-box-wrapper" @click.stop="goToSearch">
        <view class="search-box" @click.stop>
          <uni-icons type="search" size="16" color="#999"></uni-icons>
          <input type="text" placeholder="永辉超市优惠商品" disabled @click.stop />
        </view>
      </view>
    </view>
    <!-- 轮播广告 -->
    <view class="banner">
      <image src="/static/imgs/assets/02.jpg" mode="scaleToFill"></image>
    </view>

    <!-- 分类导航 -->
    <view class="category-grid">
      <view class="category-item" v-for="(item, index) in categories" :key="index">
        <image :src="item.icon" mode="aspectFit"></image>
        <text>{{item.name}}</text>
      </view>
    </view>

    <!-- 附近店铺 -->
    <view class="nearby-shops">
      <view class="section-title">
        <text>附近店铺</text>
        <text class="more" @click="goToShopList">查看更多 ></text>
      </view>
      <view class="shop-list">
        <view class="shop-item" v-for="(shop, index) in shops" :key="index" @click="goToShop(shop)">
          <image :src="shop.imgUrl" mode="aspectFill"></image>
          <view class="shop-info">
            <text class="shop-name">{{shop.name}}</text>
            <view class="shop-data">
              <text>月售：{{shop.sales || 0}}</text>
              <text>起送：{{shop.expressLimit || 0}}</text>
              <text>基础运费：{{shop.expressPrice || 0}}</text>
            </view>
            <text class="shop-slogan" :style="{color: shop.sloganColor || '#ff6b6b'}">{{shop.slogan || ''}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      categories: [
        { name: '超市便利', icon: '/static/imgs/assets/super.png' },
        { name: '菜场', icon: '/static/imgs/assets/market.png' },
        { name: '水果店', icon: '/static/imgs/assets/fruits.png' },
        { name: '鲜花绿植', icon: '/static/imgs/assets/flower.png' },
        { name: '医药健康', icon: '/static/imgs/assets/drug.png' },
        { name: '家居时尚', icon: '/static/imgs/assets/home.png' },
        { name: '烘焙蛋糕', icon: '/static/imgs/assets/cake.png' },
        { name: '签到', icon: '/static/imgs/assets/sign.png' },
        { name: '大牌免运', icon: '/static/imgs/assets/prestige.png' },
        { name: '红包套餐', icon: '/static/imgs/assets/red.png' }
      ],
      shops: []
    }
  },
  onLoad() {
    this.fetchShops()
  },
  methods: {
    async fetchShops() {
      try {
        const res = await uni.request({
          url: 'http://localhost:3000/hotList'
        });
        
        if (res.statusCode === 200) {
          this.shops = res.data;
          
          this.shops.forEach((shop, index) => {
            if (!shop._id) {
              shop._id = `shop_${index}`;
            }
          });
        }
      } catch (error) {
        console.error('获取店铺数据失败:', error);
      }
    },
    
    goToShopList() {
      uni.navigateTo({
        url: '/pages/shop/shop-list'
      })
    },
    
    goToShop(shop) {
      if (!shop || !shop._id) {
        uni.showToast({
          title: '店铺数据不完整',
          icon: 'none'
        });
        return;
      }
      
      uni.setStorageSync('shopInfo', JSON.stringify(shop));
      
      uni.navigateTo({
        url: `/pages/shop/shop-detail?id=${shop._id}&name=${encodeURIComponent(shop.name)}`
      });
    },
    
    // 新增：跳转到搜索页面
    goToSearch() {
      uni.navigateTo({
        url: '/pages/homepage/search',
        animationType: 'slide-in-bottom',
        animationDuration: 200
      });
    }
  }
}
</script>

<style lang="scss">
.index-container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
}

.header {
  background-color: #0086ff;
  padding: 20rpx;
  display: flex;
  flex-direction: column;

  .header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15rpx;
    
    .location {
      display: flex;
      align-items: center;
      color: #fff;
      font-size: 28rpx;
      
      text {
        margin-left: 6rpx;
      }
    }
  }

  /* 修改后的搜索框样式 */
  .search-box-wrapper {
  flex: 1;
  margin: 0 20rpx;
  padding: 15rpx 0;
  /* 关键样式 */
  pointer-events: auto;
  
  .search-box {
    background-color: #fff;
    border-radius: 30rpx;
    display: flex;
    align-items: center;
    padding: 12rpx 20rpx;
    /* 关键样式 */
    pointer-events: none;
    
    input {
      flex: 1;
      font-size: 26rpx;
      margin-left: 10rpx;
      color: #333;
      /* 关键样式 */
      pointer-events: none;
    }
  }
}
}

/* 其他原有样式保持不变... */
.banner {
  margin: 20rpx;
  border-radius: 12rpx;
  overflow: hidden;
  position: relative;
  background-color: #c7f2ff;
  height: 180rpx;

  image {
    width: 100%;
    height: 100%;
  }
}

.category-grid {
  background-color: #fff;
  padding: 20rpx;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20rpx;

  .category-item {
    display: flex;
    flex-direction: column;
    align-items: center;

    image {
      width: 60rpx;
      height: 60rpx;
      margin-bottom: 10rpx;
    }

    text {
      font-size: 24rpx;
      color: #333;
    }
  }
}

.nearby-shops {
  margin-top: 20rpx;
  background-color: #fff;
  padding: 20rpx;

  .section-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20rpx;
    
    text {
      font-size: 28rpx;
      font-weight: bold;
    }
    
    .more {
      color: #999;
      font-size: 24rpx;
      font-weight: normal;
    }
  }

  .shop-item {
    display: flex;
    padding: 20rpx 0;
    border-bottom: 1rpx solid #eee;

    image {
      width: 120rpx;
      height: 120rpx;
      border-radius: 8rpx;
      margin-right: 20rpx;
    }

    .shop-info {
      flex: 1;

      .shop-name {
        font-size: 30rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
      }

      .shop-data {
        display: flex;
        flex-wrap: wrap;
        margin-bottom: 10rpx;
        
        text {
          font-size: 24rpx;
          color: #666;
          margin-right: 20rpx;
        }
      }

      .shop-slogan {
        font-size: 24rpx;
      }
    }
  }
}
</style>